<template>
  <div>
    <a-button id="new" @click="handleAdd">添加老师</a-button>
    <a-modal
      v-model="visible"
      title="添加老师"
      ok-text="确认"
      cancel-text="取消"
      @ok="handleSubmit"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="工号">
          <a-input
            v-decorator="[
              'id',
              { rules: [{ required: true, message: '请输入工号' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="姓名">
          <a-input
            v-decorator="[
              'name',
              { rules: [{ required: true, message: '请输入性名' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="性别">
          <a-radio-group
            v-decorator="[
              'sex',
              {
                initialValue: '0',
                rules: [{ required: true }],
              },
            ]"
          >
            <a-radio value="0">男</a-radio>
            <a-radio value="1">女</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="生日">
          <a-date-picker
            v-decorator="['birthday', { rules: [{ required: true }] }]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import { request } from "../../../api/index";
export default {
  name: "teacherAdd",
  data() {
    return {
      form: this.$form.createForm(this),
      values: {
        id: "",
        name: "",
        sex: "",
        birthday: "",
      },
      visible: false,
    };
  },
  methods: {
    moment,
    handleSubmit(e) {
      this.visible = false;
      e.preventDefault();
      this.form.validateFields((err, value) => {
        if (!err) {
          this.values = value;
          // console.log("Received values of form: ", this.values);
          this.values.birthday = moment(this.values.birthday).format(
            "YYYY-MM-DD"
          );
          request({
            url: "/user/teacher_create",
            method: "post",
            data: {
              id: this.values.id,
              name: this.values.name,
              sex: this.values.sex,
              birthday: this.values.birthday,
            },
          })
            .then((res) => {
              // console.log(res);
              if (res.data.message == "success") {
                alert("添加成功");
                this.$parent.refreshS();
              } else {
                alert("添加失败");
              }
            })
            .catch((err) => {
              // console.log(err);
            });
        }
      });
    },
    handleAdd() {
      this.visible = true;
    },
  },
};
</script>
<style lang="less" scoped>
#new {
  float: left;
}
a-form-item {
  margin-bottom: 4px;
}
.sex {
  width: 100%;
  font-size: 12px;
  font-weight: 400;

  label {
    margin-left: 56px;
    font-size: 14px;
    color: #262626;
  }
}
.birthday {
  margin-top: 11px;
  label {
    margin-left: 56px;
    font-size: 14px;
    color: #262626;
  }
  .ant-calendar-picker-input {
    margin-left: 20px;
  }
}
</style>
